<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
<template>
	<view class="page">
		<!-- 分类 -->
		<view class="nav_head">
			<view :class="type == 0?'nav_items':'nav_item'" @click="pick(0)">
				全部
			</view>
			<view :class="type == 1?'nav_items':'nav_item'" @click="pick(1)">
				我发出的
			</view>
			<view :class="type == 2?'nav_items':'nav_item'" @click="pick(2)">
				我的上级
			</view>
			<view :class="type == 3?'nav_items':'nav_item'" @click="pick(3)">
				我的下级
			</view>
		</view>
		<!-- 分类 -->
		<view class="list_head" v-for="(item,index) in list" @click="get_detail(item.id)">
			<view class="list_title" v-if="list[index].updated_at != list[index-1].updated_at">
				{{item.updated_at}}
			</view>
			<view class="list_info">
				<view class="list_info_top">
					<view class="list_top_left">
						<image class="list_top_img" :src="item.avatar_url" mode=""></image>
						<view class="list_name_head">
							<view class="list_name">
								{{item.process_name}}
							</view>
							<view class="list_time">
								{{item.created_at}}
							</view>
						</view>
					</view>
					<view class="iconfont icon-ellipsis" @click.stop="get_show(item.id,item.product_batch_process_id,item.process_user_id)"></view>
				</view>
				<block  v-for="(it,ind) in item.sheet_list" :key="ind">
					<view class="list_msg_head" v-if="it.type == 'text'">
						{{it.key}}：<text>{{it.value}}</text>
					</view>
				</block>
				<view class="list_bottom">
					<view class="list_bottom_but" v-if="item.is_read == 0">
						未读
					</view>
					<view class="list_bottom_buts" v-else>
						已读
					</view>
					<!-- <view class="list_bottom_msg">
						全部未读
					</view> -->
				</view>
			</view>
		</view>
		<view class="buttom_msg">没有更多了</view>
		<view class="mode_head" v-if="show_type == true">
			<view class="mode_but_head">
				<view class="mode_but" style="border-bottom: 1rpx solid #a1a1a1;"  @click="get_fillIn()">
					修改追溯
				</view>
				<view class="mode_but" @click="get_product_batch_process_log_sheet_del()">
					撤销追溯
				</view>
			</view>
			<view class="mode_quxiao" @click="get_show()">
				取消
			</view>
		</view>
	</view>
</template>
<script>
	import source from "../../api/source/index.js";
	export default {
		data() {
			return {
				show_type: false,
				type:0,
				list:[],
				id:0,
				product_batch_process_id:0,
				process_user_id:0
			}
		},
		onShow(){
			this.show_type = false;
			this.get_product_batch_process_log_list();
		},
		methods: {
			//修改溯源
			get_fillIn(){
				var that  =this;
				uni.getStorage({
					key: 'userInfo',
					success: function (res) {
						var id  = res.data.id;
						if(id == that.process_user_id){
							uni.navigateTo({
								url:'../editSource/editSource?product_batch_process_id=' + that.product_batch_process_id
							})
						}else{
							uni.showToast({
								title:'只能修改自己的溯源记录',
								icon:'none'
							})
						}
					}
				});
			
			},
			get_detail(id){
				uni.navigateTo({
					url:'../detail/detail?process_log_id=' + id
				})
			},
			pick(type){
				this.type = type;
				this.get_product_batch_process_log_list();
			},
			get_product_batch_process_log_sheet_del(){
				var that  =this;
				uni.getStorage({
					key: 'userInfo',
					success: function (res) {
						var id  = res.data.id;
						if(id == that.process_user_id){
							source.product_batch_process_log_sheet_del({process_log_id:this.id}).then((res) => {
								if (res.code == 0) {
										this.show_type = false;
										uni.showToast({
											title: res.msg,
											icon: 'none'
										})
								} else {
									uni.showToast({
										title: res.msg,
										icon: 'none'
									})
								}
							})
						}else{
							uni.showToast({
								title:'只能撤销自己的溯源记录',
								icon:'none'
							})
						}
					}
				});
			},
			get_product_batch_process_log_detail(){
				source.product_batch_process_log_detail().then((res) => {
				})
			},
			get_product_batch_process_log_list() {
				source.product_batch_process_log_list({type:this.type}).then((res) => {
						if (res.code == 0) {
							this.list = res.data.list;
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			get_null() {},
			get_show(id,product_batch_process_id,process_user_id) {
				this.show_type = !this.show_type;
				this.id = id;
				this.product_batch_process_id = product_batch_process_id;
				this.process_user_id = process_user_id;
			}
		}
	}
</script>
<style scoped>
	.icon-ellipsis {
		font-size: 50rpx;
	}

	.mode_but {
		width: 100%;
		height: 112rpx;
		color: #000000;
		font-size: 40rpx;
		text-align: center;
		line-height: 112rpx;
	}

	.mode_but_head {
		width: 95%;
		background: rgb(213, 213, 213);
		margin-bottom: 16rpx;
		border-radius: 28rpx;
	}

	.mode_quxiao {
		width: 95%;
		height: 112rpx;
		background: #fff;
		color: #007AFF;
		font-size: 40rpx;
		font-weight: 600;
		text-align: center;
		line-height: 112rpx;
		border-radius: 28rpx;
		margin-bottom: 66rpx;
	}

	.mode_head {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgb(0, 0, 0, 0.4);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-end;
	}

	/* 列表 */
	.buttom_msg {
		width: 100%;
		font-size: 24rpx;
		color: #9B9B9B;
		text-align: center;
		margin: 50rpx 0;
	}

	.list_bottom_msg {
		margin-left: 7rpx;
		color: #8C8C8C;
		font-size: 26rpx;
	}
	
	.list_bottom_but {
		width: 76rpx;
		height: 38rpx;
		text-align: center;
		line-height: 38rpx;
		background: #F2F2F2;
		color: #8C8C8C;
		border-radius: 90rpx;
		font-size: 24rpx;
	}

	.list_bottom_but {
		width: 76rpx;
		height: 38rpx;
		text-align: center;
		line-height: 38rpx;
		background: #FCEDEB;
		color: #F0250E;
		border-radius: 90rpx;
		font-size: 24rpx;
	}

	.list_bottom {
		width: 95%;
		margin: 0 auto;
		display: flex;
		align-items: center;
		margin-top: 10rpx;
	}

	.list_msg_head {
		width: 95%;
		margin: 0 auto;
		color: #767676;
		padding-bottom: 15rpx;
		font-size: 28rpx;
	}

	.list_top_right image {
		width: 100%;
		height: 100%;
	}

	.list_top_right {
		width: 32rpx;
		height: 6rpx;
	}

	.list_time {
		color: #8C8C8C;
		font-size: 24rpx;
	}

	.list_name {
		font-size: 32rpx;
		color: #262626;
		font-weight: 600;
	}

	.list_name_head {
		margin-left: 8rpx;
	}

	.list_top_img {
		width: 68rpx;
		height: 68rpx;
		border-radius: 10rpx;
	}

	.list_top_left {
		display: flex;
		align-items: center;
	}

	.list_info_top {
		width: 95%;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-bottom: 20rpx;
	}

	.list_info {
		width: 95%;
		margin: 0 auto;
		background: #FFFFFF;
		border-radius: 25rpx;
		padding: 20rpx 0;
		margin-top: 8rpx;
	}

	.list_title {
		width: 90%;
		margin: 0 auto;
		color: #8C8C8C;
		padding-top: 24rpx;
		font-size: 26rpx;
	}

	.list_head {
		width: 100%;
	}

	/* 列表 */
	/* <!-- 分类 --> */
	.nav_items {
		border-bottom: 6rpx solid rgb(240, 37, 14);
		font-weight: 600;
		font-size: 28rpx;
		color: #262626;
	}

	.nav_item {
		border-bottom: 6rpx solid #fff;
		font-size: 28rpx;
		color: #262626;
	}

	.nav_head {
		width: 100%;
		height: 90rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	/* <!-- 分类 --> */
	.page {
		background: rgb(242, 242, 242);
		min-height: 100vh;
		width: 100%;
	}
</style>
